import "./NavigateSider.css"
import {Layout, Menu, type MenuProps} from "antd";
import React from "react";
import {LaptopOutlined, NotificationOutlined, UserOutlined} from "@ant-design/icons";

const {Sider} = Layout;
const items2: MenuProps['items'] = [UserOutlined, LaptopOutlined, NotificationOutlined].map(
    (icon, index) => {
        const key = String(index + 1);
        return {
            key: `sub${key}`,
            icon: React.createElement(icon),
            label: `subnav ${key}`,
            children: Array.from({length: 4}).map((_, j) => {
                const subKey = index * 4 + j + 1;
                return {
                    key: subKey,
                    label: `option${subKey}`,
                };
            }),
        };
    },
);

const NavigateSider = () => {
    return (
        <>
            <Sider className={"tomato-sider"} width={200}>
                <Menu
                    theme="dark"
                    mode="inline"
                    defaultSelectedKeys={['1']}
                    defaultOpenKeys={['sub1']}
                    style={{height: '100%', borderRight: 0}}
                    items={items2}
                />
            </Sider>
            <footer className={"tomato-sider-footer"}>build：2023-05-05 version：2.0.0</footer>
        </>
    );
};

export default NavigateSider;